<template>
    <div>//学生选课
        <div class="card" style="margin-bottom: 10px">
            <el-input style="width: 260px; margin-right:10px" v-model="data.name" placeholder="请输入课程名称查询"
                      :prefix-icon="Search"/>
            <el-input style="width: 260px; margin-right:10px" v-model="data.no" placeholder="请输入课程编号查询"
                      :prefix-icon="Search"/>
            <el-input style="width: 260px" v-model="data.teacher" placeholder="请输入教师名称查询"
                      :prefix-icon="Search"/>
            <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </div>

        <div class="card" style="margin-bottom: 10px">
            <div>
                <el-table :data="data.tableData" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="70"/>
                    <el-table-column prop="no" label="课程编号"/>
                    <el-table-column prop="name" label="课程名称"/>
                    <el-table-column prop="descr" label="课程描述"/>
                    <el-table-column prop="times" label="课时"/>
                    <el-table-column prop="teacher" label="任课老师"/>
                    <el-table-column label="操作" width="180px">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="selectCourse(scope.row)">选课</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="data.pageNum" :page-sizes="[5, 10, 20]" :page-size="data.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="data.total">
        </el-pagination>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "@/router";

const data = reactive({
    name: '',
    no: '',
    teacher: '',
    tableData: [],
    total: 0,
    pageNum: 1,
    pageSize: 5,
    student: JSON.parse(localStorage.getItem('student-user') || '{}')
});

const load = () => {
    request.get('/course/selectPage', {
        params: {
            pageNum: data.pageNum,
            pageSize: data.pageSize,
            name: data.name,
            no: data.no,
            teacher: data.teacher,
        }
    }).then(res => {
        data.tableData = res.data?.list || [];
        data.total = res.data?.total || 0;
    }).catch(error => {
        ElMessage.error('加载数据失败');
    });
};

const reset = () => {
    data.name = '';
    data.no = '';
    data.teacher = '';
    load();
};

const handleEdit = (row) => {
    // 实现编辑逻辑
};
const handleCurrentChange = (newPage) => {
    data.pageNum = newPage;
    load();
};

const handleSizeChange = (newSize) => {
    data.pageSize = newSize;
    load();
};

// 调用方法获取后台数据
load();




const  selectCourse =(row) =>{
request.post('/studentCourse/add',{studentId: data.student.id,name:row.name,no:row.no,courseId:row.id
}).then(res => {
        if (res.code === '200') {
            ElMessage.success("操作成功")
        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>